<script setup>
// 二手产品
import { ref,onMounted} from 'vue';
import { twohandclassApi, twohandlistApi } from '../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const total = ref(0)
const pageSize2 = ref(20)
const currentPage2 = ref(1)
const tabid = ref()
const classlist = ref([])
const Popular = ref([])
// 切换
const tabsswitch = function (val) {
    tabid.value = val
    currentPage2.value = 1
    // Popular.value = []
    getlist(1)
}
const product = ref([])
// 切换页码
const handleCurrentChange = function (val) {
  scrollTo(0,0)
  getlist(val)
}
// 获取列表
const getlist = async function (val) {
  const msg = await twohandlistApi({
      limit: 20,
      page: val,
      ColumnsId:tabid.value
  })
  if (msg.data.code == 0) {
      product.value = msg.data.data
      total.value = msg.data.total
    }
}

const gethotlist = async function () {
  const msg = await twohandlistApi({
      limit: 4,
      page: 1,
      Hot:1
  })
  if (msg.data.code == 0) {
      Popular.value = msg.data.data
  }
}

// 获取tab栏
const gethandclass = async function () {
  const msg = await twohandclassApi()
  if (msg.data.code == 0) {
    classlist.value = msg.data.data
    tabid.value = classlist.value[0].id
    getlist(1)
  }
}
const push = function (id) {
  router.push({path:'/order/handinfo',query:{id:id}})
}
onMounted(() => {
    gethotlist()
    gethandclass()
})
</script>
<template>
  <div class="main">
    <div class="main_tj1 s20">
      <div class="main_tj1_left">
        <div class="tjrm"></div>
        <div class="main_tj1_left_list" v-for="item in Popular" :key="item.id">
          <div class="pic_fm"><img :src="item.thumb" alt="" style="width: 120px;height:120px"/></div>
          <ul>
            <li style="text-overflow:ellipsis;white-space: nowrap;overflow: hidden;">{{ item.title }}</li>
            <li style="color: #F60;margin-bottom: 10px;">价格：{{ item.price}}</li>
            <li><span class="an"><a @click="push(item.id)" >查看详细</a></span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="main_left">
      <div class="product_right_ht">
        <ul>
        <li v-for="(item,index) in classlist" :key="index" class="anniu3" :class="{'xz':tabid==item.id}" @click="tabsswitch(item.id)">
          <a style="cursor: pointer;">{{ item.title }}</a>
        </li>
        </ul>
      </div>
      <div class="main_cplby" style="border:none;">
          <div class="pro" v-for="(item, index) in product" :key="item.id">
            <a @click="push(item.id)" title="" >
            <div class="pro_pic"><img :src="item.thumb" alt="" />
            </div>
            <div class="name ahover" style="color: #000;text-overflow:ellipsis;white-space: nowrap">
              {{ item.title }}
            </div>
            <div class="goumai">
            <div class="text" style="color: #F60;">￥{{ item.price }}</div>
            </div>
            <div class="xanniu">
              <div class="scan">
                <div class="scan_gm"><a><i></i>购买联系</a></div>
              </div>
            </div>
         </a>
          </div>
      </div>
      <div class="clear"></div>
      <div class="product_right_ym">
        <div class="page" style="clear:both">
          <span class="Notices">共<strong>{{ total }}</strong>条数据,分<strong>{{ Math.ceil(total/20) }}</strong>页显示,当前为第<strong>{{ currentPage2 }}</strong>页。</span>
          <el-pagination
                v-model:current-page="currentPage2"
                v-model:page-size="pageSize2"
                :small="small"
                background
                :disabled="disabled"
                :background="background"
                layout="prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
        </div>
      </div>
     
    </div>
  </div>
  <div style="clear:both"></div>
</template>
<style scoped>
.ahover:hover {
  color: #F60 !important;
  cursor: pointer !important;
}
:deep(.el-pagination.is-background .el-pager li.is-active){
    background-color: #FCBE00;
}
</style>